<template>
    <div class="borderLine">
      <div class="content">
        <div class="form">
          <el-form

            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="昵称">
              <el-input  size="small"></el-input>
            </el-form-item>
            <el-form-item label="头像">
              <a-upload :fileName="'userAva'"></a-upload>
            </el-form-item>
            <el-form-item label="性别">
              <template slot-scope="scope">
                <!-- <span v-if="scope.row.makerGender === 1">男</span>
                <span v-if="scope.row.makerGender === 2">女</span> -->
              </template>
            </el-form-item>
            <el-form-item label="生日">
              <div class="block">
                <el-date-picker

                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </div>
            </el-form-item>
          </el-form>
        </div>

        <!-- 底部按钮 -->
        <div class="info-foot">
          <el-button type="primary" @click="submitMakerInfo()">保存</el-button>
        </div>
      </div>
    </div>
</template>

<script>
import AUpload from '@/components/upload/AvaUpload.vue'
  export default {
    components: {AUpload},
    data () {
      return {
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
    }
  }
</script>


<style lang="scss" scoped>
.borderLine {
  min-height: 200px;
  position: relative;
  padding: 30px 0 94px;
  width: 990px;
  border-radius: 8px;
  background-color: #fff;
}

.content {
  //表单
  .form {
    margin: 0 auto;
    width: 1000px;
    .segment-title {
      height: 34px;
      line-height: 34px;
      margin: 50px 0 9px;
      font-size: 20px;
      color: #333;
    }
    .maker-info-title {
      margin-top: 100px;
    }
    .el-input {
      width: 200px;
    }
  }
  //协议
  .ant-form-item {
    margin-bottom: 18px;
  }
  //底部
  .info-foot {
    width: 100%;
    text-align: center;
    margin-top: 50px;
  }
}

//分界线
.dividing-line {
  width: 940px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.ant-row {
  position: relative;
  height: auto;
  margin-right: 0;
  margin-left: 0;
  zoom: 1;
  display: block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.ant-form-item {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
  margin: 0 0 24px;
  vertical-align: top;
}

.ant-col {
  position: relative;
  min-height: 1px;
}
.ant-col-offset {
  margin-left: 100px;
}
.ant-col-20 {
  display: block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 83.33333333%;
}

.ant-form-item-control {
  position: relative;
  line-height: 40px;
  zoom: 1;
}

</style>
